<template>
  <!-- 详细数据 -->
      <div class="model detail_box">
        <div class="model_head detail_box_head">
          房间数据
          <div style="display:flex;margin-right:10px">
            <el-input v-show="data.addRoomShow" v-model="data.biliUserId" placeholder="请输入用户uid" />
            <el-button v-show="!data.addRoomShow" @click="addRoom" type="success">新增房间</el-button>
            <el-button v-show="data.addRoomShow" @click="addRoom" type="success">提交</el-button>
            <el-button v-show="data.addRoomShow" @click="quitAddRoom" type="warning">取消</el-button>
          </div>
        </div>
        <!-- 数据内容 -->
        <div v-loading="data.loading" id="detail_content" class="model_content detail_content">
          <el-table :data="data.detail.data" stripe style="width: 100%">
            <el-table-column prop="avatar" label="头像" >
              <template v-slot="scope">
                <el-avatar :size="100" :src="'https://images.weserv.nl/?url=' + scope.row.avatar" />
              </template>
            </el-table-column>
            <el-table-column style="text-decoration=line-through" prop="room_name" label="昵称" />
            <el-table-column prop="bili_room_id" label="房间ID" />
            <el-table-column prop="bili_long_room_id" label="房间长ID" />
            <el-table-column prop="is_delete" label="操作" >
              <template v-slot="scope">
                <el-button v-if="!scope.row.is_delete" @click="deleteRoom(scope.row.room_id)" type="danger">删除</el-button>
                <el-button v-if="scope.row.is_delete" @click="recoverRoom(scope.row.room_id)" type="success">恢复</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            v-model:current-page="data.page"
            :page-size="data.page_size"
            :page-sizes="[10, 20, 30, 40, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="data.detail.total"
            @size-change="onPageSizeChange"
            @current-change="onPageChange"
          />
        </div>
      </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import http from '@/http/http'
const data = reactive({
  detail: {
  },
  biliUserId: 0,
  loading: true,
  // 默认配置
  getDetailOption: {
    page: 1,
    page_size: 10
  },
  addRoomShow: false
})
onMounted(() => {
  setDetailData()
})
const onPageChange = (e) => {
  data.page = e
  setDetailData(data.getDetailOption)
}
const onPageSizeChange = (e) => {
  data.page_size = e
  setDetailData(data.getDetailOption)
}
/**
 * 获取并渲染 详细数据
 */
const setDetailData = () => {
  data.loading = true
  http
    .request({
      url: '/Admin/getRoomList',
      data: {
        page: data.page,
        page_size: data.page_size
      },
      method: 'POST'
    })
    .then((res) => {
      if (res.status === 200) {
        data.detail = res.data
        data.loading = false
      }
    })
}
const recoverRoom = (roomId) => {
  data.loading = true
  http
    .request({
      url: '/Admin/recoverRoom',
      data: {
        room_id: roomId
      },
      method: 'POST'
    })
    .then((res) => {
      if (res.status === 200) {
        ElMessage.success(res.message)
        setDetailData(data.getDetailOption)
      } else {
        ElMessage.error(res.message)
      }
    })
}
const deleteRoom = (roomId) => {
  data.loading = true
  http
    .request({
      url: '/Admin/deleteRoom',
      data: {
        room_id: roomId
      },
      method: 'POST'
    })
    .then((res) => {
      if (res.status === 200) {
        ElMessage.success(res.message)
        setDetailData(data.getDetailOption)
      } else {
        ElMessage.error(res.message)
      }
    })
}

const addRoom = () => {
  if (data.addRoomShow) {
    if (data.biliUserId) {
      data.loading = true
      http
        .request({
          url: '/Admin/addRoom',
          data: {
            bili_user_id: data.biliUserId
          },
          method: 'POST'
        })
        .then((res) => {
          if (res.status === 200) {
            ElMessage.success(res.message)
            setDetailData(data.getDetailOption)
          } else {
            ElMessage.error(res.message)
          }
        }).catch(() => {
          data.loading = false
        })
    } else {
      ElMessage.error('请输入正确的uid')
      data.loading = false
    }
  } else {
    data.addRoomShow = true
  }
}
const quitAddRoom = () => {
  data.addRoomShow = false
}
</script>

<style lang="scss" scoped>
</style>
